<template>
  <div :class="className" :style="{height:height,width:width}" >

  </div>
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '../mixins/resize'
  import { listPie } from "../../../api/dashboard/piechart";

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '300px'
      }
    },

    data() {
      return {
        MapList:[],
        rows:[],
        address:[],
        value:[],
        chart: null,

        queryParams:{
          address: undefined,
          value:undefined,
        },
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    created() {
      this.getPieList();
    },
    methods: {
      getPieList() {
        this.loading = true;
        listPie(this.queryParams).then(response => {
          this.MapList = response.rows;
          // console.log("地图饼状图数据：" + this.MapList);         //数据有获取到,javaScript格式的
          let MapList = this.MapList;
          if (MapList) {
            let obj = eval(MapList);
            for (let i = 0; i < obj.length; i++) {
              this.address.push(obj[i].address);
              this.value.push(obj[i].value);
            }
          }
          this.chart.setOption({
            legend: {
              data: this.address,
            },
            series: [{
              name:'计数',
              data: this.value,
            }]
          });
        });
      },
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        console.log("加载");
        this.chart.setOption({

          title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: this.address
          },
          series:[
            {
              name: 'Chart',
              type: 'pie',
              radius: '50%',
              center: ['50%', '50%'],
              data: this.value

            }
          ]
        })
      }
    }
  }
</script>
